<template>
  <section>
    <el-row>
      <p class="title-level2">隐患详情</p>
      <el-form label-width="140px">
        <el-col :span="12">
          <el-form-item label="隐患名称" props="name">
            <el-input v-model="row.name" :readonly="false" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车间">
            <el-input v-model="row.shopName" :readonly="false" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工房">
            <el-input v-model="row.shopRoomName" :readonly="false" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="隐患描述">
            <el-input v-model="row.desc" :readonly="false" disabled type="textarea" rows="3"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="隐患图片">
            <div v-if="imgs.length>0">
              <span
                v-for="(item,index) in imgs"
                :key="index">
                <el-image
                  style="width: 100px; height:auto;margin-right:10px;"
                  :src="item.url"
                  :z-index="3000"
                  fit="fit"
                  :preview-src-list="[item.url]"
                >
                </el-image>
              </span>
            </div>
            <span v-else>-</span>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row v-for="(historyData, index) in fromData" :key="index" style="margin-bottom:10px;">
      <p class="title-level2">{{ historyData.taskNodeName }}</p>
      <el-form label-width="140px">
        <el-col :span="12">
          <el-form-item label="审批人">
            <el-input v-model="historyData.createName" :readonly="false" disabled/>
          </el-form-item>
        </el-col>     
        <el-col :span="12">
          <el-form-item label="审批时间">
            <el-input v-model="historyData.createdDate" :readonly="false" disabled/>
          </el-form-item>
        </el-col>     
        <el-col
          v-for="(fistoryFormData, indexH) in historyData.formHistoryDataDTO"
          :key="indexH"
          :span="['textarea','upload'].includes(fistoryFormData.type)?24:12"
        >
          <el-form-item :label="fistoryFormData.title">
            <!-- <div style="width:100%;padding-left:16px" class="files" v-if="fistoryFormData.type=='upload'">
              <el-col :span="12" v-for="(ele,ind) in JSON.parse(fistoryFormData.value)"  :key="ind">
                <el-tooltip class="item" effect="dark" :content="ele.split('*_*')[1]" placement="top">
                  <span>{{ ele.split('*_*')[1] }}</span>
                </el-tooltip>
                <el-button @click="preView(ele.split('*_*')[0])" type="text">预览</el-button>
              </el-col>
            </div> -->
            <elUploads
              v-if="fistoryFormData.type=='upload'"
              readonly
              disabled
              :ref="'upload'"
              :action="action"
              :fileList="JSON.parse(fistoryFormData.value)"
              tip="提示：只能上传.jpg,.png,.jpeg,.gif,等图片(每张最大50M)和docx、pdf格式的文档,文件总计不超过5个">
            </elUploads>
            <el-input v-else-if="fistoryFormData.type=='textarea'" v-model="fistoryFormData.value" :readonly="false" disabled type="textarea" rows="3"/>
            <el-input v-else v-model="fistoryFormData.value" :readonly="false" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </section>
</template>

<script>
import { historyFromData } from "@/api/activiti/historyFormdata";
export default {
  name: "submitHistoryForm",
  props: ['info','row','imgs'],
  data() {
    return {
      // 表单参数
      form: {},  
      fromData: [],
      baseImgUrl:process.env.VUE_APP_BASE_API,
      fileList:[],
      action: process.env.VUE_APP_BASE_API + "/common/upload",
    }
  },
  created() {
    this.historyFromData();
  },
  watch:{

  },
  methods: {
    /**文档预览**/
    preView(path) {
      let filePath = process.env.VUE_APP_BASE_API + path
      if (null == path || "" == path) {
        this.$alert("申请人没有上传哦", "消息提示", {
          confirmButtonText: "确定",
        })
      } else {
        let s = process.env.VUE_APP_BASE_API.trim()
        let url = s + path
        window.open(
          process.env.VUE_APP_PREVIEW_API +
            encodeURIComponent(this.Base64.encode(url))
        )
      }
    },
    historyFromData() {
      if(this.row.id){
        historyFromData(this.row.id).then((response) => {
          this.fromData = response.data;
          console.log('this.formData',this.fromData);         
        })
      }
    },
  },
}
</script>

<style scoped lang="scss">
.box {
  display: flex;
  margin-bottom: 10px;
  text-align: right;
  .tip {
    width: 30%;
    margin-right: 10px;
    flex-shrink: 0;
  }
}
.infoBlock{
  margin-right:100px;
  >div{
    display:flex;
    flex-direction: row;
    align-items: center;
  }
  .files{
    flex: 1;
    .el-col{
      display:flex;
      align-items: center;
      >span{
        display: inline-block;
        white-space: nowrap;
        width: calc(100% - 80px);
        overflow: hidden;
        text-overflow:ellipsis;
      }
    }
  }
}


</style>
